<template>
  <view class="container">
    <image
      @click="govaletticketdetail"
      src="../../static/mine/cuponquestion.png"
      style="width: 62rpx; height: 62rpx; position: fixed; right: 26rpx; bottom: 200rpx; z-index: 99"
      mode=""
    ></image>
    <view class="navbox flex">
      <view :class="{ item: true, common: active == index }" @click="changenav(index)" v-for="(item, index) in navbar" :key="index">
        {{ item }}
      </view>
    </view>
    <view style="height: 70rpx"></view>
    <!-- 列表 -->
    <view class="list" v-for="(item, index) in couponlist" :key="item.id">
      <image :src="active == 0 ? '../../static/mine/unusecoupon.png' : '../../static/mine/useed.png'" mode="" style="width: 690rpx; height: 200rpx"></image>
      <view class="left">
        <view>
          <text style="font-size: 30rpx; color: #976941">￥</text>
          <text style="font-weight: bold; font-size: 40rpx; color: #976941">{{ item.coupon_price }}</text>
        </view>
        <view style="font-weight: 500; font-size: 24rpx; color: #976941; text-align: center">满减券</view>
      </view>
      <view class="center">
        <view style="font-weight: bold; font-size: 28rpx; color: #976941">满{{ item.man_price }}元可用</view>
        <view style="font-weight: 500; font-size: 24rpx; color: #976941; margin-top: 20rpx">有效期至{{ item.issuance_time_text }}</view>
      </view>
      <view class="gouse" @click="gouse">{{ active == 0 ? '去使用' : active == 1 ? '已使用' : '已过期' }}</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      navbar: ['未使用', '已使用', '已过期'],
      active: 0,
      couponlist: []
    };
  },
  onLoad() {
    this.getcouponlist();
  },
  methods: {
    gouse() {
      if (this.active == 0) {
        uni.reLaunch({
          url: '/pages/index/index'
        });
      }
    },
    //切换状态
    changenav(index) {
      this.couponlist = [];
      this.active = index;
      this.getcouponlist();
    },
    // 获取优惠券列表
    async getcouponlist() {
      const res = await this.http('/Coupon/myCoupon', {
        type: this.active + 1
      });
      console.log('优惠券列表', res);
      this.couponlist = res.data;
    },
    // 跳转到代驾券说明
    govaletticketdetail() {
      uni.navigateTo({
        url: '/mine/valetticketdetail/valetticketdetail'
      });
    }
  },
  onReachBottom() {
    console.log('触底了');
  }
};
</script>

<style lang="scss" scoped>
.flex {
  display: flex;
  align-items: center;
}

.container {
  box-sizing: border-box;
  padding: 30rpx;
  .navbox {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
    width: 100%;
    height: 70rpx;
    background-color: #fff;
    justify-content: space-evenly;
    font-weight: 500;
    font-size: 28rpx;
    color: #333333;
    .item {
      padding-bottom: 18rpx;
    }
    .common {
      font-weight: bold;
      font-size: 28rpx;
      color: #333333;
      border-bottom: 4rpx solid #3483f6;
    }
  }
  .list {
    position: relative;
    top: 0;
    left: 0;
    box-sizing: border-box;
    width: 690rpx;
    height: 200rpx;
    margin-top: 12rpx;

    .left {
      position: absolute;
      top: 52rpx;
      left: 62rpx;
    }
    .center {
      position: absolute;
      top: 52rpx;
      left: 258rpx;
    }
    .gouse {
      position: absolute;
      top: 48rpx;
      right: 28rpx;
      box-sizing: border-box;
      width: 100rpx;
      height: 48rpx;
      text-align: center;
      line-height: 48rpx;
      background: #fcf8f4;
      font-weight: 500;
      font-size: 24rpx;
      color: #976941;
      border-radius: 100rpx 100rpx 100rpx 100rpx;
      border: 2rpx solid #976941;
    }
  }
}
</style>
